<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 面包屑导航 -->
      <div slot="header" class="clearfix" v-if="$route.query.id">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{runsubjectName}}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- 头部搜索框 -->
      <el-form :inline="true" :model="queryInfo" label-width="80px">
        <el-row type="flex" justify="end">
          <el-col :span="20">
            <el-form-item label="目录名称">
              <el-input v-model="queryInfo.directoryName"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select placeholder="请选择" v-model="queryInfo.state">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-button @click="clearForm">清除</el-button>
            <el-button type="primary" @click="searchForm">搜索</el-button>
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <el-button
                type="text"
                icon="el-icon-back"
                v-if="$route.query.id"
                @click="$router.back()"
                >返回学科</el-button
              >
              <el-button type="success" @click="add">新增目录</el-button>
              </el-row>
          </el-col>
        </el-row>
      </el-form>

      <!-- 提示 -->
      <el-alert type="info" show-icon :closable="false">
        <span slot="title">数据一共{{ counts }}条</span>
      </el-alert>

      <!-- 列表 -->
      <el-table :data="list">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="所属学科" prop="subjectName"></el-table-column>
        <el-table-column
          label="目录名称"
          prop="directoryName"
        ></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column label="创建日期" prop="addDate">
          <template v-slot="{ row }">
            <span>{{ row.addDate | parseTimeByString }}</span>
          </template>
        </el-table-column>
        <el-table-column label="面试题数量" prop="totals"></el-table-column>
        <el-table-column label="状态" prop="state">
          <template v-slot="{ row }">
            <span v-if="row.state === 1">已启用</span>
            <span v-else>已禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template v-slot="{ row }">
            <el-button type="text" size="small" @click="changeBtn(row)">{{
              row.state === 1 ? "禁用" : "启用"
            }}</el-button>
            <el-button
              type="text"
              size="small"
              :disabled="row.state === 1 ? true : false"
              @click="editBtn(row)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="row.state === 1 ? true : false"
              @click="delDirectorys(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[10, 20, 30]"
          :page-size="queryInfo.pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="counts"
        >
        </el-pagination>
      </el-row>
    </el-card>

    <!-- 新增 ｜ 修改弹框 -->
    <add-directory
      :subjectID = '$route.query.id'
      ref="addDialogRef"
      :add-dialog.sync="addDialog"
      @addDir="getDirectorysList"
      :subjectNameList="subjectNameList"
    ></add-directory>
  </div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/directorys.js'
import { simple, detail } from '@/api/hmmm/subjects.js'
import addDirectory from '@/module-hmmm/components/directorys-add.vue'

export default {
  name: 'DirectivesIndex',
  components: {
    addDirectory
  },
  data () {
    return {
      list: [],
      queryInfo: {
        subjectID: this.$route.query.id || null,
        page: 1,
        pagesize: 10,
        directoryName: null,
        state: null
      },
      directorysList: [],
      counts: 0,
      addDialog: false,
      subjectNameList: [],
      runsubjectName: null
    }
  },
  async beforeCreate () {
    const id = this.$route.query.id
    const { data } = await detail({ id })
    this.runsubjectName = data.subjectName
  },

  created () {
    this.getDirectorysList()
    this.getSubjectList()
  },
  computed: { },
  methods: {
    // 获取列表详情
    async getDirectorysList () {
      const { data } = await list(this.queryInfo)
      this.list = data.items
      this.counts = data.counts
    },
    // 获取学科列表
    async getSubjectList () {
      const { data: res } = await simple()
      this.subjectNameList = res
    },
    // 每页有多少条
    handleSizeChange (val) {
      this.queryInfo.pagesize = val
      this.getDirectorysList()
    },
    // 当前页数
    handleCurrentChange (val) {
      this.queryInfo.page = val
      this.getDirectorysList()
    },
    // 删除操作
    delDirectorys (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async action => {
        await remove({ id })
        this.getDirectorysList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },
    // 改变状态
    async changeBtn (row) {
      await changeState({
        id: row.id,
        state: row.state === 1 ? 0 : 1
      })
      this.getDirectorysList()
      this.$message.success('修改状态成功')
    },
    // 清除表单
    clearForm () {
      this.queryInfo.directoryName = ''
      this.queryInfo.state = null
      this.getDirectorysList()
    },
    // 搜索表单
    searchForm () {
      this.queryInfo.page = 1
      this.getDirectorysList()
      // this.$message.success('搜索成功')
    },
    // 点击编辑获取列表内容
    editBtn (val) {
      this.$refs.addDialogRef.addForm = val
      this.addDialog = true
    },
    // 点击新增出现弹框
    add () {
      this.addDialog = true
    }

  }
}
</script>

<style scoped lang='less'>
.box-card {
  margin: 10px;
}
.el-table {
  margin-top: 15px;
}
.el-pagination {
  margin-top: 15px;
}
</style>
